<div id="containter" class="clearfix" style="margin-right:200px;">
	<div class="content-left">
		<div class="chat-above" id="above">
			<div class="clearfix message connect-message"> 
				<span id="connect-message" style="background-color:#FFFFFF;color:#4665d4;">
					<a href="javascript:void(0)" style="color:#4665d4;">
						<i class="layui-icon">&#xe63a;</i>
						查看更多消息
					</a>
				</span>
			</div>
			<#if chatMessageList?? && chatMessageList.content>
			<#list chatMessageList.content?reverse as chatMessage>
				<#if chatMessage.calltype == "呼出">
					<div class="clearfix chat-block">
						<div class="chat-right"> 
							<img class="user-img" src="/im/img/user.png" alt="">
							<div class="chat-message">
								<label class="time">${chatMessage.createtime!''}</label>
								<label class="user">${user.uname!''}</label> 
							</div>
							<div class="chatting-right">
								<i class="arrow"></i>
								<div class="chat-content">${(chatMessage.message!'')?no_esc}</div>
							</div>
						</div>
					</div>
				<#else>
					<div class="clearfix chat-block">
						<div class="chat-left"> 
							<img class="user-img" src="/im/img/user.png" alt="">
							<div class="chat-message">
								<label class="user">${entimuser.uname!''}</label> 						
								<label class="time">${chatMessage.createtime!''}</label>
							</div>
							<div class="chatting-left">
								<i class="arrow"></i>
								<div class="chat-content">${(chatMessage.message!'')?no_esc}</div>
							</div>
						</div>
					</div>
				</#if>
			</#list>
			</#if>
		</div>   
		<div class="chat-bottom" id="bottom">
			<textarea id="message" name="content" style="visibility:hidden;"></textarea>
			<div class="btn-push clearfix">
				<div style="float:left;height:24px;line-height:34px;margin: 5px 20px 10px 5px;" id="surplus">0/200</div>
				<button type="button" class="send-btn active special  clearfix" id="sent" onclick="sendMessage()" style="background-color:#32c24d;font-weight: 200;padding:5px;">
					发送
				</button>
			</div>
		</div> 
	</div>
	<div class="content-rig">
		<div class="content-head">
			<p>用户信息</p>
		</div>
		<div class="content-list">
			<ul>
				<li>
					<p>姓名：${entimuser.uname!''}</p>
				</li>
				<#if organ??>
				<li>
					<p>部门：${organ.name!''} </p>
				</li>
				</#if>
				<li>
					<p>邮件：${entimuser.email!''}</p>
				</li>
				<li>
					<p>电话：${entimuser.mobile!''}</p>
				</li>
			</ul>
		</div>
		<div class="content-bottom">
			<span id="welcome-message">
				<p>欢迎使用中公高科客服企业IM</p>
				<p>QQ群：<a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=ef3061d99653e2f43619ddcefbf76ac2399196d89fd589501e19ae64423a5a31"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="中公高科客服开源社区" title="中公高科客服开源社区"></a></p>
				<p>中公高科客服企业IM为收费产品</p>
				<p>详情请咨询：<a href="https://www.roadmaint.com" target="_blank" style="color:#32c24d;">中公高科客服</a></p>
			</span>
		</div>
	</div>
</div>
<script type="text/javascript">
	var editor , words;
	KindEditor.ready(function (K) {
		editor = K.create('textarea[name="content"]', {
			autoHeightMode: false,
			width: "100%",
			resizeType: 0,
			themeType: 'simple',
			fontsize: 14,
			newlineTag : "br" , 
			filterMode:true,
			items: ['emoticons', 'cut'],
			afterChange : function() {
				var count = this.count() ;
				
				words = this.count("text") ;
				var pattern = '字数：' + words + '字'; 
				document.getElementById('surplus').innerHTML = "字符： "+count+"  ，文字：" + pattern; //输入显示
				 ////////
			},
			afterCreate : function() { //设置编辑器创建后执行的回调函数
	            var self = this;
	            //Ctrl+Enter提交表单
	            K.ctrl(document, 13, function() {
	                self.sync();
	                sendMessage();
	            });
	            K.ctrl(self.edit.doc, 13, function() {
	                self.sync();
	                sendMessage();
	            });
	        } 
		});
	});
	KindEditor.options.cssData = "body { font-size: 15px; font-family:'Microsoft Yahei', 'Helvetica', 'Simsun', 'Arial';}";
	var R3Ajax = {
		ajax:function(opt){
			var xhr = this.createXhrObject();
			xhr.onreadystatechange = function(){
				if(xhr.readyState!=4) return ;
				(xhr.status===200 ?
					opt.success(xhr.responseText,xhr.responseXML):
					opt.error(xhr.responseText,xhr.status));
			}
			xhr.open(opt.type,opt.url,true);
			if(opt.type!=='post') 
				opt.data=null;
			else
				xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			opt.data = this.parseQuery(opt.data);
			xhr.send(opt.data);
		},
		post:function(url,success,data){
			var popt = {
				url:url,
				type:'post',
				data:data,
				success:success,
				error:function(data){}
			}
			this.ajax(popt);
		},
		get:function(url,success){
			var gopt = {
				url:url,
				type:'get',
				success:success,
				error:function(){}
			}
			this.ajax(gopt);
		},
		createXhrObject:function(){
			var methods = [
				function(){ return new XMLHttpRequest();},
				function(){ return new ActiveXObject('Msxml2.XMLHTTP');},
				function(){ return new ActiveXObject('Microsoft.XMLHTTP');}
			];
			for(var i=0;len=methods.length,i<len;i++){
				try{
					methods[i]();
				}catch(e){
					continue;
				}
				this.createXhrObject = methods[i];
				return methods[i]();
			}
			throw new Error('Could not create an XHR object.');
		},
		parseQuery:function(json){
			if(typeof json == 'object'){
				var str = '';
				for(var i in json){
					str += "&"+i+"="+encodeURIComponent(json[i]);
				}
				return str.length==0 ? str : str.substring(1);
			}else{
				return json;
			}
		}
	};
	Date.prototype.format = function(fmt) { 
		 var o = { 
			"M+" : this.getMonth()+1,                 //月份 
			"d+" : this.getDate(),                    //日 
			"h+" : this.getHours(),                   //小时 
			"m+" : this.getMinutes(),                 //分 
			"s+" : this.getSeconds(),                 //秒 
			"q+" : Math.floor((this.getMonth()+3)/3), //季度 
			"S"  : this.getMilliseconds()             //毫秒 
		}; 
		if(/(y+)/.test(fmt)) {
				fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
		}
		 for(var k in o) {
			if(new RegExp("("+ k +")").test(fmt)){
				 fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
			 }
		 }
		return fmt; 
	} 
	var R3Helper = {
		resize : function(){
			var height = document.body.offsetHeight ;
			document.getElementById('above').style.height = (height - 194 - 50)+"px" ;
		}
	}
</script>
<script>
	layui.use('element', function(){
	  var $ = layui.jquery
	  ,element = layui.element(); //Tab的切换功能，切换事件监听等，需要依赖element模块
	});
	var hostname = location.hostname ;
	var socket = io.connect("http://"+top.hostname+":"+top.port+"/im/ent?userid=${user.id!''!''}&orgi=${user.orgi!''}&contextid=${contextid!''}");
	socket.on('message', function(data) {
		var chat=document.getElementsByClassName('chatting-left').innerText;
		chat = data.message;
		if(data.calltype == "呼出"){
			output('<div class="chat-right"> <img class="user-img" src="/im/img/user.png" alt=""><div class="chat-message"><label class="time">'+data.createtime+'</label><label  class="user">${user.uname!''}</label> </div><div class="chatting-right"><i class="arrow"></i><div class="chat-content">'+chat+'</div></div>' , "chat-block");
		}else if(data.calltype == "呼入"){
			output('<div class="chat-left"> <img class="user-img" src="/im/img/user.png" alt=""><div class="chat-message"><label  class="user">${entimuser.uname!''}</label><label class="time">'+data.createtime+'</label> </div><div class="chatting-left"><i class="arrow"></i><div class="chat-content">'+chat+'</div></div>' , "chat-block");	
		}    
	});
	socket.on('status',function(data){
		if(data.contextid == '${entimuser.id}'){
			if(data.message == 'online'){
				top.$('#chat_${entimuser.id}').removeClass('offline').removeClass('online').addClass('online').attr('title' , '在线');
			}else if(data.message == 'offline'){
				top.$('#chat_${entimuser.id}').removeClass('online').removeClass('offline').addClass('offline').attr('title' , '离线');
			}
		}
	})
	function sendMessage() {
		editor.sync();
		var count = editor.count("text");
		if(count>0){
		var message = document.getElementById('message').value;
			if(message!= ""){ 
				socket.emit('message', {
					userid:"${user.id!''}",
					type:"message" ,
					session:"${user.id!''}",
					touser:"${entimuser.id!''}",
					contextid:"${user.id!''}",
					orgi:"${user.orgi!''}",
					message : message
				});
			}
			editor.html('');
		}
	}
	function output(message , clazz) {
		if(clazz == "message connect-message"){
			var messages = document.getElementsByClassName("connect-message") ;
			for(inx =0 ; inx < messages.length ; ){
				document.getElementById('above').removeChild(messages[inx]) ;
				inx++ ;
			}			
		}
		var element = ("<div class='clearfix "+clazz+"'>" +" " + message + "</div>");
		document.getElementById('above').innerHTML= (document.getElementById('above').innerHTML + element);
		document.getElementById('above').scrollTop = document.getElementById('above').scrollHeight  ;
	}
	document.getElementById('above').scrollTop = document.getElementById('above').scrollHeight  ;
	<#if online?? && online == true>
	top.$('#chat_${entimuser.id}').removeClass('offline').addClass('online').attr('title' , '在线');
	</#if>
</script>
